body{
	background-color: #292a38;
}
.rotate-baseMap{
		position: absolute; left: 10px; right: 0; top: 160px; margin: auto;
		width: 1312px; height: 516px;
		background: url("../images/baseMap.png");
}
.rotate-baseMap::before{
		position: absolute; left: -12px; right: 0; top: 0; margin: auto; z-index: 99;
		width: 342px; height: 318px; display: block; content: '';
		background: url("../images/baseLogo.png");
		animation: 10s bounceUpDown infinite;
}
.rotate{
    position: relative; width: 800px; height: 800px; cursor: move; user-select: none;
    margin: 0 auto; margin-top: -100px;
}
.rotate .center{
    display: none;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}

.rotate .itemList{ position: absolute; width: 100%; height: 100%; z-index: 20; }
.rotate .lineList{
    position: absolute; width: 100%; height: 100%; z-index: 10;
    transform-style: preserve-3d;
}


.rotate__item{
    position: absolute; display: block; cursor: pointer; width: 161px; height: 188px;
    text-align: center; line-height: 30px; font-size: 16px; color: white;
}
.rotate__item .scale{ position: absolute; top: 0; width: 100%; height: 100%; }
.rotate__item .cont{ position: relative; z-index: 2; }
.rotate__item .cont .iconfont { font-size: 28px; margin-top: 30px; margin-bottom: 60px; display: block; }
.rotate__item .cont p{ color: #fff; }

.rotate__item.blue{ color: #01e9fc; }
.rotate__item.green{ color: #02e943; }
.rotate__item.yellow{ color: #ffd200; }


.rotate__item .baseImg{ position: absolute; width: 100%; height: 100%; z-index: 1; }
.rotate__item.blue .baseImg{ background: url("../images/blue.png"); }
.rotate__item.green .baseImg{ background: url("../images/green.png"); }
.rotate__item.yellow .baseImg{ background: url("../images/yellow.png"); }


.rotate__line{
    position: absolute; left: 50%; top: 50%;
    display: block; width: 2px; height: 50%;
    padding-top: 60px; color: #fff; font-size: 50px;
    transform-origin: 50% 0;
    transform-style: preserve-3d;
}
.rotate__line .pos{ position: absolute; top: 0; }
.rotate__line svg { position: absolute; top: 0; }
.rotate__line svg path {
    stroke: #fff; fill: none;
    stroke-width: 3;
    animation: path-animation 100s linear 0s infinite normal;
}
@keyframes path-animation {
    0% { stroke-dashoffset:500; }
    100% { stroke-dashoffset:0; }
}
.rotate__line .dot {
    position: absolute; top: 0; left: 0; text-align: center;
    width: 24px; height: 24px; font-size: 24px;
}
.rotate__line .dot1,.rotate__line .dot3,.rotate__line .dot4{
    animation: svg-path-animation 6s ease-in-out 0s infinite normal;
}
.rotate__line .dot1{
    offset-path: path("M0 400, 0 0"); offset-distance: 0%;
}
.rotate__line .dot2{
    offset-path: path("M0 200, 0 0"); offset-distance: 0%;
    background: #ffd200; border-radius: 100%;
    font-size: 22px; color: #000;
}
.rotate__line .dot3{
    offset-path: path("M20 400 S 0 200, 20 0"); offset-distance: 0%;
}
.rotate__line .dot4{
    offset-path: path("M20 0 S 40 200, 20 400"); offset-distance: 0%;
}
@keyframes svg-path-animation {
    from {offset-distance: 0%;}
    to {offset-distance: 100%;}
}

.rotate__line.blue { color: #07b2f9; }
.rotate__line.green { color: #00ff5b; }
.rotate__line.yellow { color: #ffd500; }

.rotate__line.blue svg path { stroke: #07b2f9; }
.rotate__line.green svg path { stroke: #00ff5b; }
.rotate__line.yellow svg path { stroke: #ffd500; }